<template>
  <div class="main_box">
    <el-row>
      <el-col :span="12">
        <Crumbs></Crumbs>
      </el-col>
      <el-col :span="12">
        <div class="opration_wrap">
          <el-button type="primary" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
      </div>
      <el-form :model="addForm" ref="addForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="APP名称：" prop="appName" >
            <el-input v-model="addForm.appName" :clearable="true" placeholder="APP名称"></el-input>
          </el-form-item>
          <el-form-item label="APP版本号：" prop="version" >
            <el-input v-model="addForm.version" :clearable="true" placeholder="APP版本号"></el-input>
          </el-form-item>
          <el-form-item label="APP版本ID：" prop="updateVersion" >
            <el-input v-model="addForm.updateVersion" :clearable="true" placeholder="APP版本ID"></el-input>
          </el-form-item>
          <el-form-item label="APP下载地址：" prop="appUrl" >
            <el-input v-model="addForm.appUrl" :clearable="true" placeholder="APP下载地址"></el-input>
          </el-form-item>
          <el-form-item label="更新类型：" prop="updateState">
            <el-select v-model="addForm.updateState"  placeholder="更新类型">
              <el-option key="1" label="强制更新" value="1"></el-option>
              <el-option key="2" label="选择更新" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="APP描述：" prop="describes" >
            <el-input v-model="addForm.describes" :clearable="true" placeholder="APP描述"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="sureClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as validators from "@/utils/validators"
  import * as message from "@/constants/message"
  import Crumbs from "@/components/Crumbs"
  import ProvinceCity from "@/components/ProvinceCity";

  export default{
    data(){
      return {
        addForm:{
          appName: "",
          version:"",
          appUrl: "",
          describes: "",
          updateVersion:"",
          updateState:""
        },
        roleRules: {
          appName: [
            { required: true, message: "请输入APP名称", trigger: "blur" }
          ],
          version: [
            { required: true, message: "请输入APP版本号", trigger: "blur" }
          ],
          updateVersion: [
            { required: true, message: "请选择APP版本ID", trigger: "blur" }
          ],
          updateState: [
            { required: true, message: "请选择更新类型", trigger: "change" }
          ]
        }
      }
    },
    components: {
      Crumbs
    },
    methods: {
      int(){
        //this.getSiteKey();
        //this.getRelateTypeInfos();
      },
      handleItemChange(val){
        this.addForm.areaIds = [val.provinceId,val.cityId];
      },
      sureClick() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                this.addIcon();
              });
          }
        })
      },
      addIcon() {
        let data = {
          appName: this.addForm.appName,
          version:this.addForm.version,
          appUrl: this.addForm.appUrl,
          describes: this.addForm.describes,
          updateVersion: this.addForm.updateVersion,
          updateState: this.addForm.updateState
        };
        this.$Post(this.$Config.api.version, data)
          .then(data => {
            this.$notify.success({
              title: message.TITLE_SUCCESS,
              message: message.MSG_ACTION_SUCCESS
            });
            this.returnList();
          })
          .catch(error => {
            if (error.msg) {
              this.$notify.error({
                title: message.TITLE_ERROR,
                message: error.msg
              });
            }
          })
      },
      returnList(){
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/operate/VersionManagement'})
      }
    },
    mounted(){
      this.int();
    }
  }
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
